<template>
  <v-col class="pa-0" >
    <v-col>
      <v-row no-gutters>
        <v-col cols="12">
          <v-textarea
            :autofocus="focusStatus"
            outlined
            name="input-7-4"
            rows="1"
            row-height="12"
            maxlength="1000"
            auto-grow
            dense
            :placeholder="placeholder"
            value=""
            color="black"
            hide-details
            :id="'commentArea-'+index"
            @focus="commentFocus"
            @blur="commentBlur"
          ></v-textarea>
        </v-col>
      </v-row>
    </v-col>
    <v-col class="pt-0" v-show="status"  @mousedown="commentForm">
      <v-row>
        <v-col class="pl-0">
          <v-row no-gutters justify="start">
            <v-col
              class="pl-0"
              cols="auto"
              v-if="!this.$vuetify.breakpoint.smAndDown"
            >
              <v-btn tile small text class="blue--text">
                <v-icon small> mdi-emoticon-happy-outline </v-icon>
                <span class="subheading"> 表情</span>
              </v-btn>
            </v-col>
            <v-col class="pl-0" cols="auto">
              <v-btn tile small text color="" class="blue--text">
                <v-icon small> mdi-image-outline </v-icon>
                <span class="subheading">图片</span>
              </v-btn>
            </v-col>
          </v-row>
        </v-col>
        <v-col class="d-flex justify-end" >
          <v-btn color="blue" class="white--text" >
            <span class="subheading">发布</span>
          </v-btn>
        </v-col>
      </v-row>
    </v-col>
  </v-col>
</template>

<script>
export default {
  props: {
    placeholder :String,
    index:String,
    fstaus:Boolean
  },
  data: () => ({
    status: false,
    focusStatus: false,
  }),
  created() {
    this.focusStatus = this.fstaus

  },
  methods: {
    commentFocus(){
      this.focusStatus = true,
      this.status = true
    },
    commentBlur(){

        if(this.focusStatus){
                this.focusStatus = false,
      this.status = false
      this.$emit('getSubCommentContain')
        }else{
          return false
        }


    },
    commentForm(){
      setTimeout("document.getElementById('commentArea-"+this.index+"').focus();",400)
      this.focusStatus = false
    }
  },
}
</script>

<style></style>
